<template>
  <el-dialog
    :visible="dialogVisible"
    width="400px"
    :title="editForm?'编辑':'新增'"
    append-to-body
    @close="$emit('close')"
  >
    <el-form
      ref="form"
      label-width="130px"
      :model="form"
      :rules="rules"
    >

      <el-form-item
        v-if="form.isDefaultRule === '否'"
        label="库名"
        prop="dbName"
      >
        <el-input
          v-model="form.dbName"
          autofocus
          placeholder=""
          clearable
        />
      </el-form-item>

      <el-form-item
        label="表名"
        prop="tableName"
      >
        <el-input
          v-model="form.tableName"
          placeholder=""
          clearable
        />
      </el-form-item>

      <el-form-item
        label="匹配模式"
        prop="matchPattern"
      >
        <el-select
          v-model="form.matchPattern"
          style="width:100%"
        >
          <el-option
            label="模糊匹配"
            value="模糊匹配"
          />
          <el-option
            label="精准匹配"
            value="精准匹配"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="是否所有库"
        prop="isDefaultRule"
      >
        <el-radio-group
          v-model="form.isDefaultRule"
          @input="(val)=>{
            if(val==='是'){
              form.dbName = ''
            }
          }"
        >
          <el-radio :label="'是'">是</el-radio>
          <el-radio :label="'否'">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="是否稽核"
        prop="isAudit"
      >
        <el-radio-group
          v-model="form.isAudit"
          @input="(val)=>{
            if(val==='否'){
              form.isSerialAudit = ''
              form.isThreshold = ''
              form.isIgnore = ''                    
            }else{
              form.isSerialAudit = '是'
              form.isThreshold = '是'
              form.isIgnore = '是'
            }
          }"
        >
          <el-radio :label="'是'">是</el-radio>
          <el-radio :label="'否'">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="form.isAudit === '是'"
        label="是否串行稽核"
        prop="isSerialAudit"
      >
        <el-radio-group
          v-model="form.isSerialAudit"
        >
          <el-radio :label="'是'">是</el-radio>
          <el-radio :label="'否'">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="form.isAudit === '是'"
        label="是否忽略阈值"
        prop="isThreshold"
      >
        <el-radio-group v-model="form.isThreshold">
          <el-radio :label="'是'">是</el-radio>
          <el-radio :label="'否'">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="form.isAudit === '是'"
        label="是否忽略异常报错"
        prop="isIgnore"
      >
        <el-radio-group v-model="form.isIgnore">
          <el-radio :label="'是'">是</el-radio>
          <el-radio :label="'否'">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="$emit('close')"
      >取 消</el-button>
      <el-button
        type="primary"
        @click="addUatBlackList"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import cbApi from '@/api/coldStandby/index'

const form = {
  tableName: '',
  dbName: '',
  matchPattern: '',
  isDefaultRule: '否',
  isIgnore: '是',
  isAudit: '是',
  isSerialAudit: '是',
  isThreshold: '是'
}
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editForm: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: {...form}
    }
  },
  computed: {
    rules() {
      return {
        dbName: [
          { required: !(this.form.isDefaultRule === '是'), message: '请输入库名', trigger: 'blur' }
        ],
        tableName: [
          { required: true, message: '请输入表名', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.form = {...form}
      } else {
        if (this.editForm) {
          this.form = this.editForm
        }
      }
    }
  },
  methods: {
    addUatBlackList() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.editForm) {
            cbApi.editAuditBlackList(this.form).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$emit('close')
            })
          } else {
            cbApi.addAuditBlackList(this.form).then(res => {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$emit('close')
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
